<style>
    html{height: 100%;}
    body{height:100%;overflow-x: hidden;}
    .widget-list-panel{
        position: relative;
        background: -webkit-linear-gradient(-120deg, #2288CD, #1471B2) top right no-repeat;
        -webkit-background-size:100%;
        height: 100%;
    }
    .widget-list-panel .header{
        position:relative;
        padding-bottom: 32px;
        color: #fff;
        text-align: center;
        z-index: 1;
    }
    .widget-list-panel h1{
        font-size: 40px;
        line-height: 48px;
        font-weight: 300;
        padding-top: 32px;
    }
    .widget-list-panel .header-info{
        font-size: 17px;
        line-height: 21px;
        padding-top: 6px;
    }
    .x-bg{
        position: absolute;
        width: 50%;
        min-width: 325px;
        height: 100%;
        right: 0;
        top: 0;
        background: url('https://os.alipayobjects.com/rmsportal/ZbQiBgorAUacvlC.png') no-repeat right top;
        background-size: 100% auto;
        z-index: 1;
    }

    .widget-list{
        padding: 0px 15px 15px 0;
        list-style: none;
        display:table;
        table-layout: fixed;
        box-sizing: border-box;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    .widget-list .widget-item {
        display: inline-block;
        list-style: none;
        width: 50%;
        padding: 15px 0 0 15px;
        box-sizing: border-box;
        text-align: center;
    }
    .widget-list .widget-wrap{
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 3px;
        padding: 23px 15px 20px;
        box-sizing: border-box;
    }
    .widget-list .widget-wrap:active{
        background: rgba(238, 238, 238, 0.85);
        border-radius: 3px;
    }
    .widget-list .icon{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url('https://os.alipayobjects.com/rmsportal/ErzQirFUtUPzGTm.png') no-repeat center;
        background-size: 32px auto;
    }
    .widget-list .icon.button{
        background-position: -1px -1px;
    }

    .widget-list .icon.list {
        background-position: -1px -65px;
    }
    .widget-list .icon.message {
        background-position: -1px -97px;
    }
    .widget-list .icon.notice {
        background-position: -1px -129px;
    }

    .widget-list .icon.popmenu {
        background-position: -1px -193px;
    }
    .widget-list .icon.process {
        background-position: -1px -225px;
    }

    .widget-list .icon.search {
        background-position: -1px -289px;
    }

    .widget-list .icon.tab {
        background-position: -1px -321px;
    }

    .widget-list .icon.dialog {
        background-position: -1px -33px;
    }

    .widget-list .icon.loading {
        background-position: -1px -256px;
    }

    .widget-list .icon.page-result {
        background-position: -1px -160px;
    }

    .widget-list .name{
        font-size: 15px;
        color: #000;
        margin: 9px 0 4px;
        line-height: 17px;
        font-weight: 300;
    }
    .widget-list .info{
        font-size: 12px;
        color: #888;
    }
    .widget-demo-show-panel{
        background: #f5f5f9;
    }

    .demo-button .am-button, .demo .am-tab, .demo .am-message, .demo .am-notice, .demo .am-inform{
        margin-bottom: 21px;
    }

    .demo .am-message.multi,
    .demo .am-button-wrap .am-button,
    .demo .am-button-group .am-button,
    .demo .am-button.bottom:last-child{
        margin-bottom: 0;
    }
    .demo .am-button.bottom{
        position: relative;
    }

    .demo .demo-content{
        padding-bottom: 60px;
    }

    .demo.demo-button .demo-content:last-child,
    .demo.demo-loading .demo-content{
        padding-bottom: 0;
    }

    .demo-dialog .demo-content{
        height: 5rem;
        min-height: 500px;
        background: url(https://zos.alipayobjects.com/rmsportal/rTrIDRjzFvXhAfgdnPVD.jpg) no-repeat;
        background-size: 100% auto;
        position: relative;
        padding-bottom: 0;
    }
    .demo-dialog .demo-content .am-dialog{
        position: absolute;
    }
    .demo-toast .demo-content{
        min-height: 300px;
        position: relative;
    }
    .demo-toast .am-toast{
        position: absolute;
    }
    .demo-page-result .demo-content{
        height: 5rem;
        min-height: 500px;
        padding-bottom: 0;
    }
    .demo-header{
        text-align: center;
        font-size: 30px;
        padding-top: 32px;
        color: #108ee9;
    }
    .demo-header-brief{
        text-align: center;
        color: #888;
        font-size: 18px;
        padding-bottom: 32px;
        font-weight: 300;
    }
    .demo-search .demo-type-title{
        font-weight: 300;
    }
    .demo-tab .demo-type-title,
    .demo-list .demo-type-title,
    .demo-search .demo-type-title,
    .demo-notice .demo-type-title{
        color: #888;
        font-size: 13px;
        padding: 60px 15px 9px;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
    }
    .demo-popmenu .demo-type-title,
    .demo-dialog .demo-type-title,
    .demo-page-result .demo-type-title,
    .demo-toast .demo-type-title,
    .demo-loading .demo-type-title{
        margin-top: 50px;
        font-size: 15px;
        padding: 11px 15px;
        background-color: #3a3a3a;
        color: #fff;
        text-align: center;
        position: relative;
    }

    .demo-dialog .demo-type-title,
    .demo-page-result .demo-type-title,
    .demo-loading .demo-type-title{
        margin-top: 0;
    }
    .demo-popmenu .demo-type-title i.dot{
        position: absolute;
        right: 15px;
        top: 0px;
        font-size: 24px;
        line-height: 30px;
    }
    .demo-popmenu .demo-content{
        position: relative;
        min-height: 160px;
    }
    .demo-popmenu .am-popmenu-mask{
        position: absolute;
    }

    .swiper-slide{
        height: auto;
        position: static;
        display: block;

    }
    .demo-header-des{
        padding: 0 15px;
        font-size: 13px;
        color: #888;
    }
    .demo-article, .demo-agreement{
        background-color: #fff;
    }

    @media only screen and (min-width: 800px) {
        .widget-list .widget-item{
            width: 33%;
        }
    }
</style>
<div class="widget-demo-show-panel">
    <div class="demo demo-agreement">
        <div class="demo-header">服务协议</div>
        <div class="demo-header-brief"></div>

        <div class="demo-content">
            <div class="am-agreement">
                <h2 class="am-agreement-title">支付宝服务协议</h2>
                <div class="am-agreement-content">
                    <p>支付宝服务是由支付宝网络技术有限公司向支支付宝服务是由支付宝网络技术有限公司向支支付宝服务是由支付宝网络技术有限公司向支</p>
                    <h4>一、声明与承诺</h4>
                    <p>1.1  本协议已对与您的权益有或可能具有重大关系的条款，及对本公司具有或可能具有及对本公司具有或可能具有及对本公司具有或可能具有</p>
                    <p>1.2  本协议已对与您的权益有或可能具有重大<span class="am-agreement-strong">已满十八周岁才可申请</span></p>
                    <h4>二、定义和理解</h4>
                    <p>2.1 支付宝账户：本公司向您提供的唯一编号。您可自行为该支付宝账户设置密码，并用以查询或计量您的预付，应收或应付款。</p>
                    <p>2.2 更多协议：<span class="blue">《争议处理规则》、《支付宝交易通用规则》您提供的唯一编号</span>《争议处理规则》、《支付宝交易通用规则》您提供的唯一编号。您可自行为该支付宝账户设置密码，并用以查询或计量您的预付，应收或应付款。</p>
                </div>
            </div>
        </div>
    </div>
</div>